{% extends "base.html" %} {% block content %}
<div class="introduction text-align-center">
  <h1>Color Palette</h1>
  <p>Extracts dominating colors from your image</p>
</div>
<div class="image-showcase">
  <img
    src="{{url_for('static', filename='images/image-before-processing.jpg')}}"
    width="450"
    height="310"
    alt="image before processing"
  />
  <img src="{{url_for('static', filename='images/right-arrow.png')}}" height="115" />
  <img
    src="{{url_for('static', filename='images/image-after-processing.jpg')}}"
    width="450"
    height="310"
    alt="image after processing"
  />
</div>
<h2 class="text-align-center">Try It Now</h2>
<form method="POST" enctype="multipart/form-data">
  <div class="image-upload-wrapper">
    {{form.hidden_tag()}}
    <!-- prettier-ignore -->
    <div class="image-upload">
              {{form.photo(class="image-input")}} 
              <img src="/static/images/image-icon.png" alt="image icon">
              <div class="subtitle">Upload Image</div>
              <div class="image-name"></div>
              {% for error in form.photo.errors %}
              <span style="color: red">{{ error}}</span>
              {% endfor %}
            </div>
    <p class="undertext">*Image size must be less than 2Mb</p>
  </div>
  <div class="number-input">
    <label>Palette Height(1-8)</label>
    {{form.palette_height(value=6, min=1, max=8)}}
    <!-- prettier-ignore -->
    {% for error in form.palette_height.errors %}
    <span style="color: red">{{ error}}</span>
    {% endfor %}
  </div>
  <div class="number-input">
    <label>Palette Outline Width in Pixels (1-40)</label>
    {{form.palette_outline_width(class="u-full-width", value=10, min=1, max=40)}}
    <!-- prettier-ignore -->
    {% for error in form.palette_outline_width.errors %}
    <span style="color: red">{{ error}}</span>
    {% endfor %}
  </div>
  <div class="number-input">
    <label>Palette Outline color</label>
    <input type="color" name="palette_outline_color" value="white" />
  </div>
  <input class="submit-button" type="submit" value="submit" />
</form>

{% endblock %}
